<html>

<body>
  <div id="app" style="width:100%;height:300px;box-shadow:  0 0 10px 1px #123"></div>
  <button onclick="onChangeLayoutSort()">sort</button>
</body>
<script src="../dist/VEditor.browser.js"></script>
<script>
  const { VEditor } = window.VEditor;
  const editor = new VEditor({
    dom: document.getElementById("app"),
    // mode: "view"
  });
  editor.graph.line.shapes['default'].checkNewLine = () => true
  const data = {
    "nodes": [
      {
        "type": "domNode",
        "iconPath": "/images/favicon.png",
        "name": "<span style='color:red'>node-1</span>",
        "uuid": "0",
        x: 0, y: 0
      },
      {
        "type": "domNode",
        "name": "node-bigger",
        "width": 200,
        "uuid": "1",
        x: 0, y: 0
      },
      {
        "type": "domNode",
        "name": "node-3",
        "uuid": "2",
        x: 0, y: 0
      },
      {
        "type": "domNode",
        "name": "node-4",
        "uuid": "3",
        x: 0, y: 0
      },
      {
        "type": "domNode",
        "name": "nodee-5",
        "uuid": "4",
        x: 0, y: 0
      }
    ],
    "lines": [
      {
        "to": "1",
        "toPoint": 2,
        "label": "test",
        "from": "0",
        "fromPoint": 3,
        "type": "polyline"
      },
      {
        "to": "2",
        "toPoint": 2,
        "from": "1",
        "fromPoint": 3,
        "type": "polyline"
      },
      {
        "to": "3",
        "toPoint": 2,
        "from": "2",
        "fromPoint": 3,
        "type": "polyline"
      },
      {
        "to": "4",
        "toPoint": 2,
        "from": "2",
        "fromPoint": 3,
        "type": "polyline"
      }
    ]
  };

  data.nodes.forEach(item => {
    if (!item.width) {
      item.width = 100;
    }
    item.height = 50;
  })
  // dagre配置
  editor.config.dagreOption = {
    rankdir: 'TB',
    ranksep: 150
  }
  // async
  async function setData() {
    await editor.schema.setData(data);
    await editor.schema.format();
    editor.controller.autoScale(100);
    editor.controller.autoFit();
  }
  setData();


  const onChangeLayoutSort = async () => {
    editor.config.dagreOption = {
      // ...editor.config.dagreOption,
      rankdir: editor.config.dagreOption?.rankdir === "TB" ? "BT" : "TB",
      ranksep: 150,
    };
    const isRevert = editor.config.dagreOption?.rankdir === "TB";
    for (const key in editor.graph.line.lines) {
      const line = editor.graph.line.lines[key];
      line.data.fromPoint = isRevert ? 3 : 2;
      line.data.toPoint = isRevert ? 2 : 3;
    }
    editor.schema.format();
    editor.controller.autoFit();
  };


</script>

</html>